<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Webpixels">
    {% block title %}{% endblock %}
    <!-- Preloader -->
    <style>
        @keyframes hidePreloader {
                    0% {
                        width: 100%;
                        height: 100%;
                    }

                    100% {
                        width: 0;
                        height: 0;
                    }
                }

        body>div.preloader {
            position: fixed;
            background: white;
            width: 100%;
            height: 100%;
            z-index: 1071;
            opacity: 0;
            transition: opacity .5s ease;
            overflow: hidden;
            pointer-events: none;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body:not(.loaded)>div.preloader {
            opacity: 1;
        }

        body:not(.loaded) {
            overflow: hidden;
        }

        body.loaded>div.preloader {
            animation: hidePreloader .5s linear .5s forwards;
        }
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.7) !important; /* 半透明背景 */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
            backdrop-filter: saturate(180%) blur(20px);
            border-bottom: #faf7f7 1px solid;
        }
        /* 默认样式，适用于所有设备 */
        .scale {
            padding: 0 5px;
          transform: scale(0.9);
        }

        /* 大型设备 */
        @media (min-width: 992px) {
          .scale {
            transform: scale(0.8);
          }
        }
        .to-top{
            position: fixed;
            right: 20px;
            z-index: 10;
            bottom: 82px;
            cursor: pointer;
            width: 42px;
            height: 42px;
                /*{#display: none;#}*/
        }
    </style>

    <script>
        window.addEventListener("load", function() {
            setTimeout(function() {
                document.querySelector('body').classList.add('loaded');
            }, 300);
        });
    </script>

    <link rel="stylesheet" href="../../static/vendor/bootstrap-5.3.0-alpha1-dist/css/bootstrap.min.css">
    <!-- Quick CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='front/css/vender/quick-website.css') }}" id="stylesheet">
    <!-- AOS CSS -->
    <link href="{{ url_for('static', filename='front/css/vender/aos.css') }}" rel="stylesheet"/>
    {% block extendcss %}{% endblock %}
</head>

<body>
    <!-- Preloader 页面加载效果 -->
    <div class="preloader">
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    {% block GoPro %}{% endblock %}

    <!-- Navbar 导航栏-->
    <nav class="navbar navbar-expand-lg pb-2 navbar-light bg-white">
        <div class="container" style="scale: 90%">
            <!-- Brand -->
            <a class="navbar-brand pl-3 mb-1" href="/">
                <img alt="Image placeholder" src="{{ url_for('static', filename='front/images/logo.png') }}" id="navbar-logo">
            </a>
            <!-- Toggler -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <!-- Collapse -->
            <div class="collapse navbar-collapse" id="navbarCollapse" style="background-color: transparent !important;">
                 <ul class="navbar-nav mt-4 mt-lg-0 ml-auto pl-6">
                    <li class="nav-item ">
                        <a class="nav-link" href="{{ url_for('user.index') }}">主页</a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link" href="{{ url_for('flower.product') }}">关于花品</a>
                    </li>
                    <li class="nav-item ">
                        <a class="nav-link" href="{{ url_for('story.story') }}">花坊故事</a>
                    </li>
                     <li class="nav-item ">
                        <a class="nav-link" href="{{ url_for('user.idea') }}">品牌理念</a>
                    </li>
                    <li class="nav-item dropdown-animate" data-toggle="hover" aria-expanded="false">
                        {% if user %}
                            <a href="{{ url_for('users.userInfo')}}" class="nav-link d-flex">
                                <div style="margin-top: -15px">
                                  <img style="height:42px !important;width:42px !important;" src="{{user.avatar}}" class="rounded-circle avatar " alt="">
                                </div>
                                <div class="d-none d-xl-block ps-3 ">
                                  <span >{{ user.username }}</span>
                                </div>
                            </a>
                            <div class="dropdown-menu dropdown-menu-left ">
                                <a href="{{ url_for('users.userInfo') }}" class="dropdown-item">个人信息</a>
                                <a href="{{ url_for('cart.cart') }}" class="dropdown-item">购物车</a>
                                <a href="{{ url_for('login.logout') }}" class="dropdown-item">退出登录</a>
                            </div>
                        {% else %}
                        	<a class="nav-link" data-toggle="dropdown" href="{{ url_for('login.login') }}">登录注册</a>
                            <div class="dropdown-menu dropdown-menu-left ">
                                <a href="{{ url_for('login.login') }}" class="dropdown-item">登录</a>
                                <a href="{{ url_for('login.register') }}" class="dropdown-item">注册</a>
                            </div>
                        {% endif %}
                    </li>
                </ul>

                <!-- Mobile button -->
                <div class="d-lg-none text-center">
                    <a href="/" class="btn btn-block btn-sm btn-warning">See more details</a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Main content 主要内容---->
    {% block content %}

    {% endblock %}


    <footer class="position-relative" id="footer-main">
        {#    置顶#}
        <div id="to_top" >
            <img class="to-top" src="../../static/front/images/Totop.png" alt="">
        </div>
        <!-- Footer -->
            <div class="container pt-4 pl-4" style="scale: 90%">
                <hr class="divider divider-fade divider-dark my-4">
                <div class="row align-items-center justify-content-md-between pb-4">
                    <div class="col-md-6">
                        <div class="copyright text-sm font-weight-bold text-center text-md-left">
                            &copy; 2025 <a href="/" class="font-weight-bold" target="_blank">星星花坊</a>. All rights reserved
                        </div>
                    </div>
                    <div class="col-md-6">
                        <ul class="nav justify-content-center justify-content-md-end mt-3 mt-md-0">
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    团队
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    隐私
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">
                                    帮助
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
    </footer>
    <!-- Core JS  -->
    <script src="{{ url_for('static', filename='vendor/bootstrap-5.3.0-alpha1-dist/js/bootstrap.bundle.min.js') }}"></script>
    <!-- Animation JS -->
    <noscript>
    <style>
        *[data-aos] {
            display: block !important;
            opacity: 1 !important;
            visibility: visible !important;
        }
    </style>
    </noscript>
    <script src="{{ url_for('static', filename='vendor/aos.js') }}" type="text/javascript"></script>
    <script>
        AOS.init({
            delay:200,
            duration: 700,
            // Disable animation on less than 1200px, change value if you like
            disable: function () {
                var maxWidth = 900;
                return window.innerWidth < maxWidth;
            }
        });

        // 修复了注释部分，确保 JavaScript 代码可以正常执行
        document.getElementById('to_top').addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    </script>
<!-- 扩展 JavaScript 代码-->
    {% block extendjs %}{% endblock %}
</body>

</html>